<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<title>Campus Path</title>
</head>

<body>
<div id="container">
	<div id="header">
		<div id="links">
			<a href="javascript:showMap()"><img src="img/mapButton2.png" alt="Map" id="MapBtn" /></a>
			<a href="javascript:showAbout()"><img src="img/aboutButton.png" alt="About" id="AboutBtn" /></a>
			<a href="javascript:showFeedback()"><img src="img/feedbackButton.png" alt="Feedback" id="FeedbackBtn" /></a>
		</div>
		
		<div id="logo">
			<img src="img/logo-cropped.png" alt="Campus Path">
		</div>
	</div>
	<div id="bar"></div>
	
	<div id="Main" class="Tabs">
		<div id="leftSide">
			<h2>Starting and Ending Locations</h2>
			Beginning: <input type="text" id="beginning" style="position:relative; left:9px"/> <br />
			Destination: <input type="text" id="ending" /> <br />

			<a href="list.html" onclick="window.open('list.html','popup','width=400,height=700,scrollbars=yes,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=50,top=0'); return false">View List of Buildings</a>
			<!--<a href="#" id="debug">(debugging)</a>-->

			<br />
			
			<h2>Custom Options</h2>
			<input type="checkbox" id="grass"/> <label for="grass">Walk On Grass</label><br />
			<input type="checkbox" id="parking"/> <label for="parking">Walk Thru Parking Lots</label><br />
			<input type="checkbox" id="handicap" /> <label for="handicap">Handicap Accessible</label><br />
			
			<h2>Anticipated Speed</h2>
			<button onClick="changeSpeed(3)">Walk</button>
			<button onClick="changeSpeed(10)">Bike</button>
			<input type="text" id="speed" value="Enter Speed" onfocus="this.select();" onblur="changeSpeed(this.value);if(this.value=='')this.value='Enter Speed';" />
			(miles per hour)<br />
			
			<h2>Results</h2>
			<table>	
				<tr>			
					<td>
						<a href="#" onclick="javascript:generatePath(false);">
						<img src="img/generatePathButton2.png" onmouseover="javascript:this.src='img/generatePathButton.png';" onmouseout="javascript:this.src='img/generatePathButton2.png';" />
						</a>
					</td>
					<td>
						Distance: <input type="text" id="distance" value="" readonly /><br />
						Duration: <input type="text" id="duration" value="" readonly /><br /> <br />
						<div id="zoomButton">
			               <a href="#" onClick="javascript:toggleZoom();" ><img src="img/zoomIn.png" id="zoomImage" /></a>
		                </div>
					</td>
				</tr>
			</table>
			<hr />
			Ver la página en <a href="index_es.html">español</a>.
		</div>
		<div id="rightSide">
			<iframe src="map.html" id="mapIFrame" ></iframe>
		</div>	
	</div>
	
	<div id="About" class="Tabs hidden">
		<div id="AboutText">
		<h1>Project Overview</h1>
		<p>Campus Path is a web application developed to provide students, faculty, and visitors 
		to the University of North Texas (UNT) with travel routes and accompanying travel information 
		within the boundaries of the main UNT campus.  This software gives users access to routes 
		between specific locations on campus, along with a projected travel time that is dependent 
		upon the user’s speed.  Routes generated by Campus Path are unique in the fact that they take 
		into account sidewalks, grassy areas, and routes through buildings in addition to ordinary streets.  
		In a university setting, this is beneficial since most optimal routes are not restricted to 
		recognized streets, and instead are found in sidewalks and “shortcuts” that are overlooked in 
		regular maps.</p>
		<h1>Team</h1>
		<p>Campus Path was developed by four students as a semester-long project for Dr. Ryan Garlick’s CSCE 
		4410 class, taught at the University of North Texas during the Fall 2012 semester.  The students, 
		pictured below, are all current undergraduate students majoring in Computer Science.</p>
		
		<div id="danielAsch" class="teamMember">
			Daniel Asch<img src="img/Daniel_photo.png" alt="Daniel Asch">
		</div>
		
		<div id="aaronBuchanan" class="teamMember">
			Aaron Buchanan<img src="img/Aaron_photo.png" alt="Aaron Buchanan">
		</div>
		
		<div id="natalieParde" class="teamMember">
			Natalie Parde<img src="img/Natalie_Photo.png" alt="Natalie Parde">
		</div>
		
		<div id="jakeStroud" class="teamMember">
			Jake Stroud<img src="img/Jake_Photo.png" alt="Jake Stroud">
		</div>
		</div>
	</div>					
	
	<div id="Feedback" class="Tabs hidden">
		<div id="FeedbackText">
		<h1>Feedback</h1>
		<p>If you have any questions or comments for our website you can contact us at 
			<a href="mailto:CampusPathDevelopers@gmail.com">CampusPathDevelopers@gmail.com</a>.</p>
		</div>
	</div>
</div>
	
	<!-- pre-load all other tab images -->
	<img src="img/mapButton.png" class="hidden" />
	<img src="img/aboutButton2.png" class="hidden" />
	<img src="img/feedbackButton2.png" class="hidden" />
	
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>
	<script>
	
	//global variables
	var zoomSetting="zoomedOut";
	
	//search suggestions
	$(function() {
		var availableTags = [
			"Air Force ROTC",
			"ATH1",
			"Alumni Center",
			"ALUM",
			"Art Building",
			"ART",
			"Auditorium Building",
			"AUDB",
			"Bain Hall",
			"BAIN",
			"Bruce Hall",
			"BRUC",
			"Business Leadership Building",
			"BLB",
			"Campus Greens",
			"CGRN",
			"Chemistry Building",
			"CHEM",
			"Chestnut Hall",
			"CHNT",
			"Chilton Hall",
			"CHIL",
			"Clark Hall",
			"CLAR",
			"Coliseum",
			"COL",
			"College Inn",
			"CINN",
			"Crumley Hall",
			"CRUM",
			"Curry Hall",
			"CURY",
			"Eagle Student Services Center",
			"ESSC",
			"Environmental Education, Science & Technology Building",
			"ENV",
			"Environmental Science Greenhouse",
			"ESCG",
			"Facilities Complex",
			"CARP",
			"Fouts Field",
			"STAD",
			"Gateway Center",
			"GATE",
			"General Academic Building",
			"GAB",
			"Goolsby Chapel",
			"CHAP",
			"Hickory Hall",
			"HKRY",
			"Highland Street Parking Garage",
			"HIGH",
			"Honors Hall",
			"HNRS",
			"Hurley Administration Building",
			"ADMN",
			"Kan Bahnsen Gymnasium",
			"MGYM",
			"Kerr Hall",
			"KERR",
			"Language Building",
			"LANG",
			"Legends Hall",
			"LGNS",
			"Library Mall",
			"LMAL",
			"Life Sciences Complex",
			"LIFE",
			"Lyceum",
			"LYCM",
			"Maple Hall",
			"MAPL",
			"Marquis Hall",
			"MARQ",
			"Matthews Hall",
			"MATT",
			"McConnell Hall",
			"MCON",
			"Mozart Square Hall",
			"MOZA",
			"Murchison Performing Arts Center",
			"PAC",
			"Music Annex",
			"MUSA",
			"Music Building",
			"MUSI",
			"New Alumni Pavilion 2011",
			"APAV",
			"Performing Arts Annex",
			"PACX",
			"Physical Education Building",
			"PEB",
			"Physics Building",
			"PHYS",
			"Pohl Recreation Center",
			"RECS",
			"Radio, TV, Film & Performing Arts",
			"RTFP",
			"Residence Hall Association",
			"EDU1",
			"Sage Hall",
			"SAGE",
			"Santa Fe Square",
			"SFE",
			"Science Research Building",
			"SRB",
			"Scoular Hall",
			"SCOU",
			"Shrader Pavilion",
			"PAVF",
			"Stovall Hall",
			"STOV",
			"Sullivant Public Safety Center",
			"POLI",
			"Sycamore Hall",
			"SYMR",
			"Terrill Hall",
			"TH",
			"Track & Field Building",
			"ATH2",
			"Traditions Field",
			"TRDF",
			"Traditions Hall",
			"TRAD",
			"Union Circle Parking Garage",
			"UCPG",
			"University Service Building",
			"USB",
			"University Union",
			"UU",
			"West Hall",
			"WEST",
			"Willis Library",
			"LIBR",
			"Wooten Hall",
			"WH"
		];
		$( "#beginning" ).autocomplete({
			source:function(request, response)
			{
				var results = $.ui.autocomplete.filter(availableTags, request.term);
				response(results.slice(0, 7));
			},
			/*select:function(request, response)
			{
				moveStart();
			},*/
			change:function(request, response)
			{
				moveStart();
			}
		});
		$( "#ending" ).autocomplete({
			source:function(request, response)
			{
				var results = $.ui.autocomplete.filter(availableTags, request.term);
				response(results.slice(0, 7));
			},
			/*select:function(request, response)
			{
				moveEnd();
			},*/
			change:function(request, response)
			{
				moveEnd();
			}
		});
	});
	
	//moves start to designated building
	function moveStart()
	{
		var name=document.getElementById("beginning").value;
		processBuildingName(name,"start");
		
	}
	
	//moves end to designated building
	function moveEnd()
	{
		var name=document.getElementById("ending").value;
		processBuildingName(name,"end");
	}
	
	//clears the text from the specified textbox
	function clearTextbox(id)
	{
		if(id=="start")
		{
			document.getElementById("beginning").value='';
		}
		else if(id=="end")
		{
			document.getElementById("ending").value='';
		}
	}
	
	//gets the coordinates of a designated building
	function processBuildingName(input,whichArrow)
	{
		//ajax to get building's coordinates
		var xmlhttp;
		if (window.XMLHttpRequest)
		{// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp=new XMLHttpRequest();
		}
		else
		{// code for IE6, IE5
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		
		xmlhttp.onreadystatechange=function()
		{
			if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
				//makes cursor "default" - not hourglass
				document.body.style.cursor='default';
				
				var response=xmlhttp.responseText.split('\n')[0];//remove 000webhost tracking code
				var result=eval('('+response+')');
				
				var isZoomedOut=(zoomSetting=="zoomedOut");
				
				//start
				if(whichArrow=="start")
				{
					document.getElementById("mapIFrame").contentWindow.customMoveStart(result.x,result.y,isZoomedOut);
					document.getElementById("beginning").value=result.name;
				}
				//end
				else
				{
					document.getElementById("mapIFrame").contentWindow.customMoveEnd(result.x,result.y,isZoomedOut);
					document.getElementById("ending").value=result.name;
				}
			}
		}
		
		//call getPoint.php with arguments
		xmlhttp.open("GET","scripts/getPoint.php?input="+input,true);
		xmlhttp.send();
		
		//"wait" cursor - hourglass
		document.body.style.cursor='wait';
	}
	
	//change speed (and duration, as it is a function of speed)
	function changeSpeed(speed)
	{
		//sets speed
		document.getElementById("speed").value=speed;
		
		//if distance has a value (i.e. path has been generated)
		if(document.getElementById("distance").value!="")
		{
			showDuration();
		}
	}
	
	//calculates and displays the duration
	function showDuration()
	{
		//get distance and speed
		var distance=parseFloat(document.getElementById("distance").value);
		var speed=document.getElementById("speed").value;
		
		//if speed is not a number
		if(isNaN(speed))
		{
			//alert("Please enter a valid speed.");
			speed=3;
			document.getElementById("speed").value=speed;
		}
		
		//calculate and display duration
		var duration=((distance/speed)*60);
		duration=duration.toFixed(2)+" minutes";
		document.getElementById("duration").value=duration;
	}
	
	//fetches and displays shortest path
	function generatePath(drawBigImage)
	{
		//get coordinates of start and end arrows
		var coordinates=document.getElementById("mapIFrame").contentWindow.getCoordinates();
		var startx=coordinates[0];
		var starty=coordinates[1];
		var endx=coordinates[2];
		var endy=coordinates[3];
		
		//get checkbox options
		var grass=document.getElementById('grass').checked?1:0;
		var parking=document.getElementById('parking').checked?1:0;
		var handicap=document.getElementById('handicap').checked?1:0;
		
		var xmlhttp;
		if (window.XMLHttpRequest)
		{// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp=new XMLHttpRequest();
		}
		else
		{// code for IE6, IE5
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		
		xmlhttp.onreadystatechange=function()
		{
			if (xmlhttp.readyState==4 && xmlhttp.status==200)
			{
				//makes cursor "default" - not hourglass
				document.body.style.cursor='default';
				
				var response=xmlhttp.responseText.split('\n')[0];//remove 000webhost tracking code
				
				//max time reached
				if(response.charAt(0)!='{')
				{
					alert("Error: time limit reached.");
					//we need to try to eliminate this from ever happening
					//by optimizing main.php so it never reaches the 10 second limit set for scripts for our host
				}
				else
				{
					var obj=eval('('+response+')');
					
					//if no error
					if(obj.distance>0)
					{
						//if for 600-width image
						if(!drawBigImage)
						{
							//set distance and show duration				
							var roundedDistance=obj.distance;
							roundedDistance=Math.round(parseFloat(roundedDistance)*100)/100;
							document.getElementById("distance").value=roundedDistance+" miles";
							showDuration();
							
							//show image with generated path
							document.getElementById("mapIFrame").contentWindow.changeImage(obj.imageURL);
						}
						//for 2500-width image
						else
						{
							//open window with 2500-width image
							window.open(obj.imageURL,'_blank');
						}
					}
					//error
					else
					{
						alert("Error: no path exists between the two points.");
						//alert(response);//for debugging
					}
				}
			}
		}
		
		//call main.php with arguments
		var big=(drawBigImage)?"&big=1":"";
		var url="scripts/main.php?startx="+startx+"&starty="+starty+"&endx="+endx+"&endy="+endy+"&grass="+grass+"&parking="+parking+"&handicap="+handicap+big;
		xmlhttp.open("GET",url,true);
		//document.getElementById("debug").href=url;
		xmlhttp.send();
		
		//"wait" cursor - hourglass
		document.body.style.cursor='wait';
	}
	
	//toggles zoom of campus map
	function toggleZoom()
	{
		/*if (zoomSetting == "zoomedOut")
		{
			document.getElementById('mapIFrame').contentWindow.zoomIn();
			document.getElementById("zoomImage").src="img/zoomOut.png";
			zoomSetting="zoomedIn";
		}
		else
		{
			document.getElementById('mapIFrame').contentWindow.zoomOut();
			document.getElementById("zoomImage").src="img/zoomIn.png";
			zoomSetting="zoomedOut";
		}*/
		
		generatePath(true);
	}
	
	//
	//"change tab" functions
	//
	function showMap()
	{
		//content
		document.getElementById("Main").style.display="block";
		document.getElementById("About").style.display="none";
		document.getElementById("Feedback").style.display="none";
	 
		//buttons
		document.getElementById("MapBtn").src="img/mapButton2.png";
		document.getElementById("AboutBtn").src="img/aboutButton.png";
		document.getElementById("FeedbackBtn").src="img/feedbackButton.png";
	}
	
	function showAbout()
	{
		//content
		document.getElementById("Main").style.display="none";
		document.getElementById("About").style.display="block";
		document.getElementById("Feedback").style.display="none";
	 
		//buttons
		document.getElementById("MapBtn").src="img/mapButton.png";
		document.getElementById("AboutBtn").src="img/aboutButton2.png";
		document.getElementById("FeedbackBtn").src="img/feedbackButton.png";
	}
	
	function showFeedback()
	{
		//content
		document.getElementById("Main").style.display="none";
		document.getElementById("About").style.display="none";
		document.getElementById("Feedback").style.display="block";
	 
		//buttons
		document.getElementById("MapBtn").src="img/mapButton.png";
		document.getElementById("AboutBtn").src="img/aboutButton.png";
		document.getElementById("FeedbackBtn").src="img/feedbackButton2.png";
	}
	
	</script>
</body>
</html>
